<script setup lang="ts">
import VirtualizeTable from '@/common/lty-table/VirtualizeTable.vue'
import { useOperate } from '@/stores/operate'
import { leadGovOrg } from '@/service/api/sys/village/structure'
import { excelDownload } from '@/utils/file/download'

const userTemplate = {
  name: ''
}
const typeObj = {
  1: '查询',
  2: '新增',
  3: '编辑',
  4: '删除'
}
const router = useRouter()
const operateStore = useOperate()
const table_config = ref({
  thead: [
    {
      label: '行政组织名称',
      prop: 'name',
      otherOptions: {
        align: 'left'
      }
    },
    {
      label: '组织概况',
      prop: 'peopleCount'
    }
  ],
  filter_Config: {
    name: ''
  },
  SpecialField: ['peopleCount'],
  otherOptions: {
    treeProps: { children: 'childrenList' }
  },
  paging: false,
  num: false,
  select: true,
  expend: false,
  isoperate: true,
  operatewidth: '256px',
  ispagination: true,
  methodName: 'getGovOrgAll'
})
// 跳转到操作页 1查询 2新增 3编辑 4修改密码 5删除 6批量删除
const openDialog = (type: Number, data?: any) => {
  operateStore.setType(type)
  operateStore.setName('structure')
  operateStore.setTypeObj(typeObj)
  if (type === 4) {
    operateStore.setForm({ id: data.id })
  } else {
    operateStore.setForm(Object.assign({}, userTemplate, data))
  }
  router.push('/operate')
}

// 导出数据
const lead = async () => {
  const res = await leadGovOrg()
  excelDownload(res)
}

// 多选返回数据
const getMultiples = () => {}
</script>

<template>
  <div class="flex h-full flex-col">
    <div class="mb-[20px] flex items-center justify-between">
      <div>
        <el-button
          type="success"
          class="button_addTo"
          @click="openDialog(2, {})"
        >
          <svg-icon
            name="icon-system-button-create"
            width="16px"
            height="16px"
            class="mr-3"
          />
          <span>创建组织</span>
        </el-button>
        <el-button type="primary" class="button_default" @click="lead">
          <svg-icon
            name="icon-system-button-lead"
            width="16px"
            height="16px"
            class="mr-3"
          />
          <span>导出</span>
        </el-button>
      </div>
      <div class="flex items-center">
        <!--筛选列表条件-->
        <div class="mr-3 whitespace-nowrap text-xs text-[--auxiliary]">
          行政组织名称
        </div>
        <el-input
          class="input_darkColor"
          v-model="table_config.filter_Config.name"
        />
      </div>
    </div>
    <div class="flex-1">
      <VirtualizeTable
        :table_config="table_config"
        @selectChange="getMultiples"
      >
        <template #peopleCount="{ row }">
          <div>
            <span class="text-sm text-[--auxiliary]">人员数量 ：</span>
            <span>{{ row.peopleCount }}</span>
          </div>
        </template>
        <template #operate="{ row }">
          <div class="flex justify-center">
            <div class="mr-3 h-[32px] w-[32px]">
              <svg-icon
                v-if="row.childrenList && row.childrenList.length > 0"
                name="icon-system-button-see"
                width="32px"
                height="32px"
                class="cursor-pointer rounded-full border border-[#5E9DB4] p-[8px]"
                @click="openDialog(1, row)"
              />
            </div>
            <svg-icon
              name="icon-system-button-tianjia"
              width="32px"
              height="32px"
              class="mr-3 cursor-pointer rounded-full border border-[#5E9DB4] p-[8px]"
              @click="openDialog(2, { parentId: row.id })"
            />
            <svg-icon
              name="icon-system-button-bianji"
              width="32px"
              height="32px"
              class="mr-3 cursor-pointer rounded-full border border-[#5E9DB4] p-[8px]"
              @click="openDialog(3, row)"
            />
            <svg-icon
              name="icon-system-button-shanchu"
              width="32px"
              height="32px"
              class="mr-3 cursor-pointer rounded-full border border-[#5E9DB4] p-[8px]"
              @click="openDialog(4, row)"
            />
          </div>
        </template>
      </VirtualizeTable>
    </div>
  </div>
</template>

<style scoped></style>
